﻿<!DOCTYPE html>
<html>
	<head>
		<title>エフェクトサンプル</title>
		<script type="text/javascript" src="canvas-effects.js"></script>

		<script type="text/javascript">
		<!--
		var canvas;
		var context;
		var image;

		// 画像読み込み
		function load_image()
		{
			canvas = document.getElementById("canvas1");
			context = canvas.getContext("2d");
			image = new Image();
			image.onload = function() {
				context.drawImage(image, 0, 0, canvas.width, canvas.height);
			};
			image.src = "image.png";
		}
		
		// モザイクをかける
		function effect_mosaic()
		{
			effect_clear();
			var block_size = document.getElementById("m_size").value;
			if (!isNaN(block_size) && block_size >= 1 && block_size <= 255) {
				mosaic("canvas1", Number(block_size));
			}
			else {
				alert("ブロックサイズは1-255の数値を入れてください。");
			}
		}
		
		// 白黒にする
		function effect_mono()
		{
			effect_clear();
			mono("canvas1");
		}
		
		// セピア色にする
		function effect_sepia()
		{
			effect_clear();
			sepia("canvas1");
		}
		
		// 画像を元に戻す
		function effect_clear()
		{
			context.drawImage(image, 0, 0, canvas.width, canvas.height);
		}
		
		//-->
		</script>
	</head>
	<body onload="load_image();">
		<h1>エフェクトサンプル</h1>
		<canvas id="canvas1" width="400" height="478"></canvas>
		<br/>
		ブロックサイズ(1-255)：<input type="text" size="3" id="m_size"/>
		<button type="button" onclick="effect_mosaic();">モザイク</button>
		<br/>
		<button type="button" onclick="effect_mono();">白黒</button>
		<br/>
		<button type="button" onclick="effect_sepia();">セピア</button>
		<br/>
		<button type="button" onclick="effect_clear();">元に戻す</button>
	</body>
</html>
